<template>
  <div class="chat-info-group text-center">
    <div
      class="chat-info-group-header"
      @click="toggleContext"
    >
      <h1 class="mb-0 text-left">{{msg}}</h1>
      <p>五个api</p>
    </div>

    <div
      class="chat-info-group-body collapse"
      :class="{'show': contextVisible}"
      id="shared-context"
    >
      <div class="chat-info-group-content">
        <div class="form-row" :class="'max-w-100'">
          <div class="col-4 col-md-2 col-xl-4 mt-1">attrs: (...)</div>
          <div class="col-4 col-md-2 col-xl-4 mt-1">emit: (...)</div>
          <div class="col-4 col-md-2 col-xl-4 mt-1">expose: exposed => {…}</div>
          <div class="col-4 col-md-2 col-xl-4 mt-1">props: (...)</div>
          <div class="col-4 col-md-2 col-xl-4 mt-1">slots: (...)</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, watchEffect, ref } from "vue";
import axios from "axios";
export default defineComponent({
  name: "common-context",
  props: {
    msg: String,
  },
  setup(props, context) {
    watchEffect(() => {
      console.log(props, context);
    });

    const contextVisible = ref(true);
    const toggleContext = () => {
      contextVisible.value = !contextVisible.value;
    };

    return {
      contextVisible,
      toggleContext,
    };
  },
});
</script>

<style scoped lang="less">
.hw-20 {
  height: 1.25rem;
  width: 1.25rem;
}
.max-w-100 {
  max-width: 100%;
}
</style>
